<!doctype html>
<html lang="en">
<head>
	<title>LineChart - Overview</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="%description%" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	
	<script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../external/raphael-min.js" type="text/javascript"></script>
    <script src="../../../../Wijmo-Open/development-bundle/wijmo/jquery.wijmo.wijtouchutil.js"></script>
	<script src="../../wijmo/jquery.wijmo.raphael.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijchartcore.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijlinechart.js" type="text/javascript"></script>
	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {

			$("#wijlinechartDefault").wijlinechart({
				header: {
					visible: true,
					text: "Concurrent Steam Users (most recent 48 hours)",
					textStyle: {
						fill: "#fafafa"
					}
				},
				indicator: {
					visible: true
				},
				axis: {
					y: {
						labels: {
							style: {
								fill: "#7f7f7f",
								"font-size": 11
							}
						},
						gridMajor: {
							style: { stroke: "#353539", "stroke-dasharray": "- " }
						},
						tickMajor: { position: "outside", style: { stroke: "#7f7f7f"} },
						tickMinor: { position: "outside", style: { stroke: "#7f7f7f"} }
					},
					x: {
						labels: {
							style: {
								fill: "#7f7f7f",
								"font-size": 11,
								rotation: -45
							}
						},
						tickMajor: { position: "outside", style: { stroke: "#7f7f7f"} }
					}
				},
				showChartLabels: false,
				hint: {
//					content: function () {
//						if ($.isArray(this)) {
//							var data = this[0];
//							return data.lineSeries.label + '\n' +
//							data.x + '\n' + data.y + '';
//						}
//						else {
//							return this.label + ":" + this.y;
//						}

//					},
					contentStyle: {
						"font-size": 10
					},
					offsetY: -10
				},
				legend: {
					visible: true
				},
				seriesList: [
					{
						label: "Steam",
						legendEntry: true,
						fitType: "spline",
						data: {
							x: [new Date('10/27/2010 11:48:00'), new Date('10/27/2010 13:47:00'), new Date('10/27/2010 15:46:00'), new Date('10/27/2010 17:45:00'), new Date('10/27/2010 19:44:00'), new Date('10/27/2010 21:43:00'), new Date('10/27/2010 23:41:00'), new Date('10/28/2010 1:40:00'), new Date('10/28/2010 3:39:00'), new Date('10/28/2010 5:38:00'), new Date('10/28/2010 7:37:00'), new Date('10/28/2010 9:36:00'), new Date('10/28/2010 11:35:00'), new Date('10/28/2010 13:34:00'), new Date('10/28/2010 15:33:00'), new Date('10/28/2010 17:32:00'), new Date('10/28/2010 19:31:00'), new Date('10/28/2010 21:30:00'), new Date('10/28/2010 23:38:00'), new Date('10/29/2010 1:27:00'), new Date('10/29/2010 3:26:00'), new Date('10/29/2010 5:25:00'), new Date('10/29/2010 7:24:00'), new Date('10/29/2010 9:23:00'), new Date('10/29/2010 11:22:00')],
							y: [2665513, 2300921, 1663229, 1622528, 1472847, 1354026, 1348909, 1514946, 1746392, 2020481, 2312976, 2539210, 2657505, 2369938, 1869805, 1648695, 1529983, 1398148, 1389668, 1568134, 1787466, 2101460, 2090771, 2351994, 2537400]
						},
						markers: {
							visible: false,
							type: "circle"
						}
					}
				],
				seriesStyles: [
					{ stroke: "#ff9900", "stroke-width": 3 }
				],
				seriesHoverStyles: [
					{ "stroke-width": 4 }
				]
			});
		});
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Overview</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<h3>
				Gamers Online</h3>
			<div id="wijlinechartDefault" class="ui-widget ui-widget-content ui-corner-all" style="width: 756px; height: 475px; background: #242529;">
			</div>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				Reference: <a href="http://store.steampowered.com/stats/">http://store.steampowered.com/stats/</a>
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
			<p>

<p>The wijlinechart widget allows you to create customized line charts. The samples in this section highlight some of the unique features of the widget, and they will help you get started with wijlinechart widget.</p>

<p>The source in this sample will show you how to add a header to the chart; how to format the axes; how to add chart labels; and how to populate the chart with data.</p>
			</p>
		</div>
	</div>
</body>
</html>
